<template>
	<page-meta>
		<navigation-bar title="乐居" background-color="#354e44" />
	</page-meta>
	<view class="order">
		<view class="order-title">等待支付</view>
		<view @tap="goToAddress" class="order-noaddress" v-if="!addressList.length">去选择收货地址</view>
		<view @tap="goToAddress" class="order-hasaddress" v-else>
			<view class="order-hasaddress-info">
				姓名:{{showAddress.name}}&nbsp;电话号码:{{showAddress.phoneNumber}}
			</view>
			<view class="order-hasaddress-info">
				收货地址:{{showAddress.province}}{{showAddress.city}}{{showAddress.region}}{{showAddress.detailAddress}}
			</view>
		</view>
		<view class="order-detail">
			<view class="order-detail-top">
				<view class="order-detail-top-ordersn">订单编号:{{orderBase.orderSn}}</view>
				<view class="order-detail-top-wait">等待支付</view>
			</view>
			<view class="order-detail-info" v-for="item in orderItems" :key="item.productSkuId">
				<image class="order-detail-info-img" :src="item.productSkuPic" mode=""></image>
				<view class="order-detail-info-desc">
					<view class="order-detail-info-desc-item order-detail-info-desc-name">
						<view class="order-detail-info-item-left">{{item.productName}}</view>
						<view class="order-detail-info-item-right">¥{{item.productPrice}} 元</view>
					</view>
					<view class="order-detail-info-desc-item">
						<view class="order-detail-info-item-left">编号:</view>
						<view class="order-detail-info-item-right">X {{item.productQuantity}}</view>
					</view>
					<view class="order-detail-info-desc-item">
						<view class="order-detail-info-item-left">规格:{{item.productAttr |format }}</view>
					</view>
				</view>
			</view>
			<view class="order-detail-bottom">
				<view class="order-detail-bottom-all">合计:{{orderBase.totalAmount}} 元</view>
				<view @tap="pay" class="order-detail-bottom-pay">确认付款</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPreOrderById as getPreOrderByIdApi,
		findAllAddress as findAllAddressApi,
		addConfirmOrder as addConfirmOrderApi
	} from '../../../api/common/index.js'
	export default {
		data() {
			return {
				orderId: '',
				orderBase: {}, //订单信息
				orderItems: [], //商品列表
				addressList: [],
				showAddress: {},
				addressId: ''
			}
		},
		onLoad(config) {
			this.orderId = config.orderId ? config.orderId : uni.getStorageSync('orderId');
			this.addressId = config.addressId ? config.addressId : '';
			this.getOrderDetai();
			this.getAddress();
		},
		filters: {
			format(value) {
				value = JSON.parse(value);
				var str = "";
				value.forEach(ele => {
					str += ele.key + ':' + ele.value + ' ';
				})
				return str
			}
		},
		methods: {
			pay() {
				var orderItemList = this.orderItems.map(ele => {
					var obj = {
						"cartId": ele.cartId,
						"productId": ele.productId,
						"productQuantity": ele.productQuantity,
						"productSkuId": ele.productSkuId
					}
					return obj;
				});
				// console.log('fkajhfgiujah iugiu -=====>',orderItemList);
				addConfirmOrderApi({
						"addressId": this.addressId,
						"orderId": this.orderId,
						"orderItemList":orderItemList
					})
					.then(res => {
						uni.navigateTo({
							url:`../pay/pay?orderId=${this.orderId}`
						})
					})


			},
			//跳转到选择地址页面
			goToAddress() {
				uni.setStorageSync('user','')
				uni.navigateTo({
					url: '../address/address'
				})
			},
			//获取订单详情
			getOrderDetai() {
				getPreOrderByIdApi(this.orderId)
					.then(res => {
						this.orderBase = res.data.orderBase;
						this.orderItems = res.data.orderItems;
					})
			},
			getAddress() {
				findAllAddressApi()
					.then(res => {
						this.addressList = res.data.items;
						if (!this.addressId.length) { //地址id为空
							this.addressId = this.addressList[0].id;
							this.showAddress = this.addressList[0];
						} else { //如果地址不为空
							var idx = this.addressList.findIndex(ele => ele.id == this.addressId);
							this.showAddress = this.addressList[idx];
						}
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: #f1ece7;
		padding: 40rpx 40rpx 150rpx;

		&-title {
			font-size: 40rpx;
			line-height: 70rpx;
			border-bottom: 1rpx solid gray;
		}

		&-noaddress {
			line-height: 100rpx;
			color: gray;
			border-bottom: 1rpx solid gray;
			margin-bottom: 30rpx;
		}

		&-hasaddress {
			padding: 30rpx 0;
			box-sizing: border-box;
			border-bottom: 1rpx solid gray;
			font-size: 28rpx;
			color: #e4e4e4e;
			margin-bottom: 30rpx;

			&-info {
				margin-bottom: 5rpx;
			}
		}

		&-detail {
			width: 100%;
			background-color: #FFFFFF;
			border-radius: 30rpx;
			padding: 40rpx 30rpx;
			box-sizing: border-box;

			&-top {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1rpx solid gray;
				font-size: 28rpx;
				color: #3e3e3e;
			}

			&-info {
				display: flex;
				box-sizing: border-box;
				height: 224rpx;
				width: 100%;
				padding: 30rpx 0;
				border-bottom: 1rpx solid gray;

				&-img {
					display: block;
					width: 162rpx;
					height: 162rpx;
					margin-right: 30rpx;
				}

				&-desc {
					flex: 1;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					font-size: 26rpx;
					color: #8d8d8d;

					&-name {
						color: #333;
					}

					&-item {
						width: 100%;
						display: flex;
						flex-wrap: nowrap;
						justify-content: space-between;
						height: 32rpx;

						&-left {
							flex: 1;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						&-right {
							width: fit-content;
						}
					}
				}
			}

			&-bottom {
				display: flex;
				justify-content: center;
				align-items: flex-end;
				flex-direction: column;

				&-all {
					margin-top: 15rpx;
					color: #e4e4e4e;
					margin-bottom: 15rpx;
				}

				&-pay {
					border: 1rpx solid #333333;
					width: 128rpx;
					height: 54rpx;
					padding: 0 10rpx;
					line-height: 54rpx;
					text-align: center;
					border-radius: 15rpx;
					font-size: 28rpx;
				}
			}
		}
	}
</style>
